<!--
 * @Date: 2024-12-11 16:55:12
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2025-02-14 17:45:01
 * @Description: 视图数据
-->
<template>
  <div class="source-view-panel">
    <el-form-item label="视图选择">
      <el-input
        v-model="dbConfig.dataCode"
        class="hp-input-dbview"
        clearable
        placeholder="请选择"
      >
        <template #append>
          <div class="dbview-select" @click.stop="openDbViewDialog">
            <el-icon><Operation /></el-icon>
          </div>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item label="视图参数" class="source-view-item">
      <el-radio-group v-model="dbState.paramCodeType">
        <el-radio
          v-for="typeItem in CodeStudioDataType.getTypes()"
          :key="typeItem.value"
          :label="typeItem.label"
          :value="typeItem.value"
        />
      </el-radio-group>
    </el-form-item>
    <CodeStudioPanel class="source-code-panel"
      v-model="dbConfig.dataParams"
      eventName="dataParams"
      :mode="CodeStudioDataType.getMode(dbState.paramCodeType)"
      :codeType="dbState.paramCodeType"
      :eventParams="['params']"
    />

    <el-form-item label="数据处理" class="source-view-item">
      <div></div>
    </el-form-item>
    <CodeStudioPanel class="source-code-panel"
      v-model="dbConfig.responseFunc"
      mode="javascript"
      eventName="responseFunc"
      :codeType="CodeStudioDataType.FUNC.value"
      :eventParams="['data', 'params']"
    />

    <!-- 弹窗区域 -->
    <DbViewDialog
      ref="dbViewDialogRef"
      @confirm="(value) => dataSource[dbState.cfgKey].dataCode = value"
    />
  </div>
</template>

<script setup>
import { computed, ref, reactive } from 'vue';
import { Operation } from '@element-plus/icons-vue'

import DbViewDialog from '../components/DbViewDialog.vue'
import CodeStudioPanel from '../components/CodeStudioPanel.vue'

import { CodeStudioDataType } from '@hp/config/pojo'

const props = defineProps({
  schema: { type: Object },
  dataSource: { type: Object }
})

// 数据集
const dbState = reactive({
  cfgKey: 'viewConfig',
  codeKey: '',
  paramCodeType: 'json'
})
// 属性配置
const dbConfig = computed(() => {
  const config = props.dataSource[dbState.cfgKey]
  if (config.dataParams.startsWith('func:')) {
    dbState.paramCodeType = CodeStudioDataType.FUNC.value
  } else {
    dbState.paramCodeType = CodeStudioDataType.JSON.value
  }
  return config
})

const dbViewDialogRef = ref()
/**
 * 打开视图选择对话框
 * @function openDbViewDialog
 */
const openDbViewDialog = () => {
  dbViewDialogRef.value.handleOpen(dbConfig.value.dataCode)
}


</script>

<style lang="scss" scoped>

</style>
<style lang="scss">
.hp-input-dbview {
  .dbview-select {
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
  }
  .el-input-group__append {
    padding: 0;
  }
  .el-color-picker__trigger {
    border: none;
  }
}
</style>